<template>
    <el-container class='home-container'>
    <el-header>
        <span>diy数据大屏系统</span>
        <el-button class="baochun" @click="baochun">保存</el-button>
    </el-header>
    <el-container>
       <el-aside width="350px"> 
    <el-button class="anniu" @click="toshow">echarts图</el-button>
    
    </el-aside>
     <el-main>
       <template v-if="showechart=='echarts'">
         <div id="myChart" :style="{width: '300px', height: '300px'}" @contextmenu.prevent="rightShow()"></div>
       </template>      
     </el-main>
     </el-container>
</el-container>
</template>
<script>
export default {
  data() {
    return {
      showechart: "echarts"
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "这是一个简单的柱状图" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    },
    toshow() {
      // this.showechart = "echarts";
      this.drawLine();
    },
    baochun(){
      
    },
    rightShow(){
      alert('123')
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background: #243137;
  color: #ffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
 
}
.el-aside {
  background: rgb(2, 47, 68);
  .anniu {
    height: 100px;
  }
}
.el-main {
  background: rgb(179, 248, 245);
}
</style>

